@contentgrowth/content-widget 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Content Growth
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,442 @@
+# @content-growth/content-widget
+
+Embed your Content Growth content anywhere with beautiful, customizable components.
+
+## Features
+
+- 🎨 **Beautiful UI** - Pre-styled components with light/dark themes
+- 🚀 **Multi-Framework** - React, Vue, Astro, and Vanilla JS support
+- 📦 **Zero Config** - Works out of the box with sensible defaults
+- 🎯 **Type Safe** - Full TypeScript support
+- ⚡ **Fast** - Built-in caching and optimized performance
+- 🎨 **Customizable** - Multiple layouts and display modes
+- 📱 **Responsive** - Mobile-first design
+
+## Installation
+
+```bash
+npm install @content-growth/content-widget
+```
+
+## Quick Start
+
+### Vanilla JavaScript
+
+```html
+<!-- Add CSS -->
+<link rel="stylesheet" href="node_modules/@content-growth/content-widget/dist/styles.css">
+
+<!-- Add container -->
+<div id="blog"></div>
+
+<!-- Initialize widget -->
+<script type="module">
+  import { ContentGrowthWidget } from '@content-growth/content-widget/widget';
+  
+  new ContentGrowthWidget(document.getElementById('blog'), {
+    apiKey: 'pk_your_key_here',
+    layout: 'cards'
+  });
+</script>
+```
+
+### React
+
+```jsx
+import { ContentList } from '@content-growth/content-widget/react';
+import '@content-growth/content-widget/styles.css';
+
+function App() {
+  return <ContentList apiKey="pk_your_key_here" layout="cards" />;
+}
+```
+
+**With Hooks:**
+
+```jsx
+import { useArticles } from '@content-growth/content-widget/react';
+
+function CustomContentList() {
+  const { articles, loading, error } = useArticles({
+    apiKey: 'pk_your_key_here',
+    page: 1,
+    limit: 12
+  });
+
+  if (loading) return <div>Loading...</div>;
+  if (error) return <div>Error: {error.message}</div>;
+
+  return (
+    <div>
+      {articles.map(article => (
+        <div key={article.uuid}>
+          <h2>{article.title}</h2>
+          <p>{article.summary}</p>
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+### Vue
+
+```vue
+<template>
+  <ContentList api-key="pk_your_key_here" layout="cards" />
+</template>
+
+<script setup>
+import { ContentList } from '@content-growth/content-widget/vue';
+import '@content-growth/content-widget/styles.css';
+</script>
+```
+
+**With Composables:**
+
+```vue
+<template>
+  <div>
+    <div v-if="loading">Loading...</div>
+    <div v-else-if="error">Error: {{ error.message }}</div>
+    <div v-else>
+      <div v-for="article in articles" :key="article.uuid">
+        <h2>{{ article.title }}</h2>
+        <p>{{ article.summary }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useArticles } from '@content-growth/content-widget/vue';
+
+const { articles, loading, error } = useArticles({
+  apiKey: 'pk_your_key_here',
+  page: 1,
+  limit: 12
+});
+</script>
+```
+
+### Astro
+
+```astro
+---
+import { ContentList } from '@content-growth/content-widget/astro';
+import '@content-growth/content-widget/styles.css';
+---
+
+<ContentList apiKey="pk_your_key_here" />
+```
+
+### API Client (Framework Agnostic)
+
+```typescript
+import { ContentGrowthClient } from '@content-growth/content-widget/core';
+
+const client = new ContentGrowthClient({
+  apiKey: 'pk_your_key_here'
+});
+
+const { articles, pagination } = await client.listArticles({
+  page: 1,
+  limit: 12,
+  tags: ['tutorial']
+});
+```
+
+## Components
+
+### Vanilla JS Widget
+
+```javascript
+import { ContentGrowthWidget } from '@content-growth/content-widget/widget';
+
+const widget = new ContentGrowthWidget(container, {
+  apiKey: 'pk_your_key_here',
+  baseUrl: 'https://api.content-growth.com',
+  layoutMode: 'cards', // 'cards' | 'rows'
+  displayMode: 'comfortable', // 'compact' | 'comfortable' | 'spacious'
+  theme: 'light', // 'light' | 'dark'
+  pageSize: 12,
+  tags: ['tutorial', 'guide'],
+  category: 'guides',
+  viewerMode: 'inline', // 'inline' | 'modal' | 'external'
+  mode: 'list' // 'list' | 'article-only'
+});
+```
+
+### React Components
+
+**ContentList:**
+
+```jsx
+<ContentList
+  apiKey="pk_your_key_here"
+  layout="cards"
+  displayMode="comfortable"
+  theme="light"
+  pageSize={12}
+  tags={['tutorial', 'guide']}
+  category="guides"
+  showPagination={true}
+/>
+```
+
+**ContentViewer:**
+
+```jsx
+<ContentViewer
+  apiKey="pk_your_key_here"
+  uuid="article-uuid"
+  theme="light"
+  showBackButton={true}
+  backUrl="/articles"
+/>
+```
+
+**Hooks:**
+
+- `useArticles(options)` - Fetch articles list
+- `useArticle(options)` - Fetch single article
+- `useCategories(options)` - Fetch categories
+- `useTags(options)` - Fetch tags
+
+### Vue Components
+
+**ContentList:**
+
+```vue
+<ContentList
+  api-key="pk_your_key_here"
+  layout="cards"
+  display-mode="comfortable"
+  theme="light"
+  :page-size="12"
+  :tags="['tutorial', 'guide']"
+  category="guides"
+  :show-pagination="true"
+/>
+```
+
+**ContentViewer:**
+
+```vue
+<ContentViewer
+  api-key="pk_your_key_here"
+  uuid="article-uuid"
+  theme="light"
+  :show-back-button="true"
+  back-url="/articles"
+/>
+```
+
+**Composables:**
+
+- `useArticles(options)` - Fetch articles list
+- `useArticle(options)` - Fetch single article
+- `useCategories(options)` - Fetch categories
+- `useTags(options)` - Fetch tags
+
+### Astro Components
+
+**ContentList:**
+
+```astro
+<ContentList
+  apiKey="pk_your_key_here"
+  layout="cards"
+  displayMode="comfortable"
+  theme="light"
+  pageSize={12}
+  tags={['tutorial', 'guide']}
+  category="guides"
+  showPagination={true}
+/>
+```
+
+**ContentViewer:**
+
+```astro
+<ContentViewer
+  apiKey="pk_your_key_here"
+  uuid={uuid}
+  theme="light"
+  showBackButton={true}
+  backUrl="/articles"
+/>
+```
+
+## API Client
+
+### ContentGrowthClient
+
+```typescript
+import { ContentGrowthClient } from '@content-growth/content-widget/core';
+
+const client = new ContentGrowthClient({
+  apiKey: 'pk_your_key_here',
+  baseUrl: 'https://api.content-growth.com', // optional
+  cacheTTL: 300000, // 5 minutes, optional
+  debug: false // optional
+});
+```
+
+### Methods
+
+#### `listArticles(options?)`
+
+```typescript
+const { articles, pagination } = await client.listArticles({
+  page: 1,
+  limit: 12,
+  tags: ['tutorial', 'guide'],
+  category: 'guides'
+});
+```
+
+#### `getArticle(uuid)`
+
+```typescript
+const article = await client.getArticle('article-uuid');
+```
+
+#### `getCategories()`
+
+```typescript
+const { categories } = await client.getCategories();
+```
+
+#### `getTags()`
+
+```typescript
+const { tags } = await client.getTags();
+```
+
+#### `clearCache()`
+
+```typescript
+client.clearCache();
+```
+
+## Styling
+
+Import the CSS file:
+
+```javascript
+import '@content-growth/content-widget/styles.css';
+```
+
+### Customization
+
+Override CSS variables:
+
+```css
+.cg-content-list {
+  --cg-primary: #3b82f6;
+  --cg-primary-hover: #2563eb;
+  --cg-bg: #ffffff;
+  --cg-bg-secondary: #f9fafb;
+  --cg-text: #1f2937;
+  --cg-text-secondary: #6b7280;
+  --cg-border: #e5e7eb;
+  --cg-radius: 12px;
+}
+```
+
+## TypeScript
+
+Full TypeScript support with exported types:
+
+```typescript
+import type {
+  Article,
+  ArticleWithContent,
+  Pagination,
+  Category,
+  Tag,
+  ClientConfig,
+  ListArticlesOptions,
+  ContentListProps,
+  ContentViewerProps
+} from '@content-growth/content-widget/core';
+```
+
+## Getting Your API Key
+
+1. Sign in to [Content Growth](https://app.content-growth.com)
+2. Go to Settings → API Keys
+3. Create a new API key
+4. Copy the key (starts with `pk_`)
+
+## Examples
+
+### Next.js App Router
+
+```tsx
+// app/articles/page.tsx
+import { ContentList } from '@content-growth/content-widget/react';
+import '@content-growth/content-widget/styles.css';
+
+export default function ArticlesPage() {
+  return (
+    <main>
+      <h1>Articles</h1>
+      <ContentList apiKey={process.env.CG_API_KEY!} />
+    </main>
+  );
+}
+```
+
+### Nuxt 3
+
+```vue
+<!-- pages/articles.vue -->
+<template>
+  <div>
+    <h1>Articles</h1>
+    <ContentList :api-key="apiKey" />
+  </div>
+</template>
+
+<script setup>
+import { ContentList } from '@content-growth/content-widget/vue';
+import '@content-growth/content-widget/styles.css';
+
+const config = useRuntimeConfig();
+const apiKey = config.public.cgApiKey;
+</script>
+```
+
+### Vanilla HTML
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" href="https://unpkg.com/@content-growth/content-widget/dist/styles.css">
+</head>
+<body>
+  <div id="blog"></div>
+  
+  <script type="module">
+    import { ContentGrowthWidget } from 'https://unpkg.com/@content-growth/content-widget/dist/widget/index.js';
+    
+    new ContentGrowthWidget(document.getElementById('blog'), {
+      apiKey: 'pk_your_key_here'
+    });
+  </script>
+</body>
+</html>
+```
+
+## License
+
+MIT
+
+## Support
+
+- [Documentation](https://docs.content-growth.com)
+- [GitHub Issues](https://github.com/ContentGrowth/content-package/issues)
+- [Email Support](mailto:support@content-growth.com)

package/dist/astro/ContentList.astro

@@ -0,0 +1,177 @@
+---
+/**
+ * ContentList Component
+ * Displays a list of articles with pagination
+ */
+import type { ContentListProps } from '../types/index.js';
+import { ContentGrowthClient } from '../core/client.js';
+import { formatDate, calculateReadingTime } from '../core/utils.js';
+
+interface Props extends ContentListProps {}
+
+const {
+  apiKey,
+  baseUrl,
+  layout = 'cards',
+  displayMode = 'comfortable',
+  theme = 'light',
+  pageSize = 12,
+  tags = [],
+  category,
+  showPagination = true,
+  linkPattern = '/articles/{uuid}',
+  showTags = false,
+  showAiSummary = true,
+  summaryMaxLength,
+  linkTarget,
+  class: className = ''
+} = Astro.props;
+
+// Get current page from URL
+const url = new URL(Astro.request.url);
+const currentPage = parseInt(url.searchParams.get('page') || '1', 10);
+
+// Fetch articles
+const client = new ContentGrowthClient({ apiKey, baseUrl });
+
+// Process tags
+let processedTags: string[] | undefined;
+if (tags) {
+  if (Array.isArray(tags)) {
+    processedTags = tags;
+  } else {
+    processedTags = tags.split(',').map(t => t.trim()).filter(Boolean);
+  }
+}
+
+const options = {
+  page: currentPage,
+  limit: pageSize,
+  tags: processedTags,
+  category: category
+};
+const result = await client.listArticles(options);
+const articles = result.articles;
+const pagination = result.pagination;
+
+// Build pagination URLs
+function buildPageUrl(page: number): string {
+  const newUrl = new URL(url);
+  newUrl.searchParams.set('page', page.toString());
+  return newUrl.pathname + newUrl.search;
+}
+
+// Truncate summary text
+function truncateSummary(text: string | null, maxLength?: number): string {
+  if (!text) return '';
+  if (!maxLength || text.length <= maxLength) return text;
+  return text.substring(0, maxLength).trim() + '...';
+}
+---
+
+<div 
+  class={`cg-content-list cg-layout-${layout} cg-display-${displayMode} cg-theme-${theme} ${className}`}
+  data-cg-widget="list"
+>
+  {articles.length === 0 ? (
+    <div class="cg-empty-state">
+      <p>No articles found.</p>
+    </div>
+  ) : (
+    <>
+      <div class={`cg-articles-grid ${layout === 'cards' ? 'cg-grid' : 'cg-list'}`}>
+        {articles.map((article) => {
+          // Build article URL from pattern
+          const articleUrl = linkPattern
+            .replace('{uuid}', article.uuid)
+            .replace('{slug}', article.slug)
+            .replace('{category}', article.category || '');
+          
+          // Build link target from pattern
+          const articleTarget = linkTarget
+            ? linkTarget
+                .replace('{uuid}', article.uuid)
+                .replace('{id}', article.uuid)
+            : undefined;
+          
+          const readingTime = calculateReadingTime(article.wordCount);
+          const publishedDate = formatDate(article.publishedAt);
+
+          return (
+            <article class="cg-article-card">
+              <a href={articleUrl} target={articleTarget} class="cg-card-link">
+                <div class="cg-card-content">
+                  {article.category && (
+                    <div class="cg-card-category">
+                      <span class="cg-category-badge">{article.category}</span>
+                    </div>
+                  )}
+                  
+                  <h2 class="cg-card-title">{article.title}</h2>
+                  
+                  {showAiSummary && article.summary && (
+                    <p class="cg-card-summary">{truncateSummary(article.summary, summaryMaxLength)}</p>
+                  )}
+                  
+                  <div class="cg-card-meta">
+                    <span class="cg-meta-author">{article.authorName}</span>
+                    <span class="cg-meta-separator">•</span>
+                    <time class="cg-meta-date" datetime={new Date(article.publishedAt * 1000).toISOString()}>
+                      {publishedDate}
+                    </time>
+                    <span class="cg-meta-separator">•</span>
+                    <span class="cg-meta-reading-time">{readingTime}</span>
+                  </div>
+                  
+                  {showTags && article.tags && article.tags.length > 0 && (
+                    <div class="cg-card-tags">
+                      {article.tags.map((tag) => (
+                        <span class="cg-tag">{tag}</span>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </a>
+            </article>
+          );
+        })}
+      </div>
+
+      {showPagination && pagination.totalPages > 1 && (
+        <nav class="cg-pagination" aria-label="Article pagination">
+          <div class="cg-pagination-info">
+            Page {pagination.page} of {pagination.totalPages}
+          </div>
+          
+          <div class="cg-pagination-controls">
+            {pagination.hasPrev && (
+              <a 
+                href={buildPageUrl(pagination.page - 1)} 
+                class="cg-pagination-btn cg-pagination-prev"
+                aria-label="Previous page"
+              >
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+                  <path d="M12 16L6 10L12 4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                </svg>
+                Previous
+              </a>
+            )}
+            
+            {pagination.hasNext && (
+              <a 
+                href={buildPageUrl(pagination.page + 1)} 
+                class="cg-pagination-btn cg-pagination-next"
+                aria-label="Next page"
+              >
+                Next
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+                  <path d="M8 4L14 10L8 16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                </svg>
+              </a>
+            )}
+          </div>
+        </nav>
+      )}
+    </>
+  )}
+</div>